<!doctype html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>search</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon" />
    <link rel="stylesheet" href="./css/cssreset-min.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/search.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=L2fFIBoizTO5nxe7ypgsV3pHGmYw6tqx" type="text/javascript"></script>

    <script src="./js/swiper.min.js"></script>
     <style>

    .swiper-container {
        width: 100%;
        height: 114px;
        margin-top:10px;

    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #d5d5d5;
        position: relative;
        cursor: pointer;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;

    }

    .swiper-slide p{
        display:block;
        width:100%!important;
        position:absolute;
        left:0;
        color:#222;
    }



    .swiper-slide p:nth-child(1){
        top:15px;
        color:rgba(0, 9, 18, 0.5);

    }

    .swiper-slide p:nth-child(2),.swiper-slide p:nth-child(3){
        font-size: 18px;
    }
    .swiper-slide p:nth-child(3){
        bottom: 20px;
    }

    .swiper-slide p:nth-child(2){
        bottom: 40px;
    }
    
    #container{
        /*height: 400px;*/
        margin-top:10px;
        padding-top: 40%
    }

    </style>
</head>
<body>
 <nav>
        <ul>
            <li><a href="./index.html"><span></span></a></li>
            <li>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <div></div></li>
            <li><span></span><div></div></li>
            <li><a href="./search.html">查找影院</a><div></div></li>
            <li><a href="./more.html">IMAX电影</a><div></div></li>
            <li><a href="./special.html">IMAX特点</a><div></div></li>
            <div class="header_hide">
                <p>语言</p>
                <p>关于IMAX</p>
                <p>联系我们</p>
                <p>工作机会</p>
                <p>
                    <img src="images/guWeibo1.png" alt="">
                    <img src="images/guweixin1.png" alt="">
                    <img src="images/guYouku2.png" alt="">
                </p>
            </div>
        </ul>
        <ul>
            <li>
                <a href="./special.html">IMAX特点</a>
            </li>
            <li>
                <a href="./more.html">IMAX电影</a>
            </li>
            <li>
                <a href="./search.html">查找影院</a>
            </li>

        </ul>
    </nav>
    <section>
        <h1>你附近的IMAX影院</h1>
        <div class="main_search">
            <input type="text" name="" id="" value="北京市东城区中华路甲10号" maxlength='30'>
        </div>
        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <p>今天</p>
                    <p>十月</p>
                    <p>28</p>
                </div>
                <div class="swiper-slide">
                    <p>星期六</p>
                    <p>十月</p>
                    <p>29</p>
                </div>
                <div class="swiper-slide">
                    <p>星期日</p>
                    <p>十月</p>
                    <p>30</p>
                </div>
                <div class="swiper-slide">
                    <p>星期一</p>
                    <p>十月</p>
                    <p>31</p>
                </div>
                <div class="swiper-slide">
                    <p>星期二</p>
                    <p>十一月</p>
                    <p>01</p>
                </div>
                <div class="swiper-slide">
                    <p>星期三</p>
                    <p>十一月</p>
                    <p>02</p>
                </div>
                <div class="swiper-slide">
                    <p>星期四</p>
                    <p>十一月</p>
                    <p>03</p>
                </div>
                <div class="swiper-slide">
                    <p>星期五</p>
                    <p>十一月</p>
                    <p>04</p>
                </div>
                <div class="swiper-slide">
                    <p>星期六</p>
                    <p>十一月</p>
                    <p>05</p>
                </div>
                <div class="swiper-slide">
                    <p>星期日</p>
                    <p>十一月</p>
                    <p>06</p>
                </div>
                <div class="swiper-slide">
                    <p>星期一</p>
                    <p>十一月</p>
                    <p>07</p>
                </div>
                <div class="swiper-slide">
                    <p>星期一</p>
                    <p>十一月</p>
                    <p>07</p>
                </div>
                <div class="swiper-slide">
                    <p>星期一</p>
                    <p>十一月</p>
                    <p>07</p>
                </div>
                <div class="swiper-slide">
                    <p>星期一</p>
                    <p>十一月</p>
                    <p>07</p>
                </div>
                <div class="swiper-slide">
                    <p>星期一</p>
                    <p>十一月</p>
                    <p>07</p>
                </div>

            </div>

        </div>
        <div id="container"></div>
        <ul>
            <li>
                <p><a href="javascript:;">北京悠唐博纳IMAX影城</a></p>
                <p>朝阳区三丰北里2号楼悠唐生活广场负1楼，101100</a></p>
                
            </li>
            <li>
                <p><a href="javascript:;">北京悠唐博纳IMAX影城</a></p>
                <p>朝阳区三丰北里2号楼悠唐生活广场负1楼，101100</a></p>
                
            </li>
            <li>
                <p><a href="javascript:;">北京悠唐博纳IMAX影城</a></p>
                <p>朝阳区三丰北里2号楼悠唐生活广场负1楼，101100</a></p>
                
            </li>
            <li>
                <p><a href="javascript:;">北京悠唐博纳IMAX影城</a></p>
                <p>朝阳区三丰北里2号楼悠唐生活广场负1楼，101100</a></p>
                
            </li>
            <li>
                <p><a href="javascript:;">北京悠唐博纳IMAX影城</a></p>
                <p>朝阳区三丰北里2号楼悠唐生活广场负1楼，101100</a></p>
                
            </li>
            <li>
                <p><a href="javascript:;">北京悠唐博纳IMAX影城</a></p>
                <p>朝阳区三丰北里2号楼悠唐生活广场负1楼，101100</a></p>
                
            </li>
        </ul>
    </section>
     


    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next',
        slidesPerView: 8,
        paginationClickable: true,
        spaceBetween: 0,
        //设置各种视口下的样式
        breakpoints: {

            768: {
                slidesPerView: 4
                // spaceBetween: 30
            },
            480: {
                slidesPerView: 2
                // spaceBetween: 20
            }
            // 320: {
            //     slidesPerView: 1,
            //     spaceBetween: 10
            // }
        }
    });
    $('.swiper-slide').eq(0).css({
            'background':'#000912'
    });

    $('.swiper-slide').eq(0).find('p').each(function(i){
        if(i==0){
            $(this).css({
                'color':'#6dc3f4'
            });
        }
        else{
            $(this).css({
                'color':'#fff'
            });
        }
    });

    function goStyle(obj){
        obj.css({
                'background':'#000912'
        });

        obj.find('p').each(function(i){
            if(i==0){
                $(this).css({
                    'color':'#6dc3f4'
                });
            }
            else{
                $(this).css({
                    'color':'#fff'
                });
            }
        });
    }

    function backStyle(obj){
        obj.css({
                'background':'#d5d5d5'
        });

        obj.find('p').each(function(i){
            if(i==0){
                $(this).css({
                    'color':'rgba(0, 9, 18, 0.5)'
                });
            }
            else{
                $(this).css({
                    'color':'#222'
                });
            }
        });
    }
    

    

    $('.swiper-slide').click(function(){
        goStyle($(this));
        $('.swiper-slide').not($(this)).each(function(){
            backStyle($(this));
        });
    });


    </script>
    
    <script>
        var map = new BMap.Map("container");          // 创建地图实例  
        var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
        map.centerAndZoom(point, 15);      
        var pos1={anchor:BMAP_ANCHOR_BOTTOM_RIGHT};    //修改控件位置
        var pos2 = {offset: new BMap.Size(150, 5)}    //修改控件偏移量
        var opts1 = {type: BMAP_NAVIGATION_CONTROL_SMALL} //修改控件的外观
        map.addControl(new BMap.NavigationControl(opts1));
        map.addControl(new BMap.ScaleControl(pos2));    
        map.addControl(new BMap.OverviewMapControl());    
        map.addControl(new BMap.MapTypeControl()); 
        map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
        map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    </script>

    <footer>
            <div class="footer_icon">
                <div>
                    <a href="javascript:;"><img src="images/guWibo2.png" alt=""></a>
                    <a href="javascript:;"><img src="images/guWixin2.png" alt=""></a>
                    <a href="javascript:;"><img src="images/guYouku.png" alt=""></a>
                </div>
            </div>
            <p>IMAX®和The IMAX Experience®是IMAX公司的注册商标</p>
            <p>
                <a href="javascript:;">使&nbsp;用&nbsp;条&nbsp;款</a>
                <a href="javascript:;">隐&nbsp;私&nbsp;政&nbsp;策</a>
            </p>
            <p>
                <span>
                <img src="images/new-china-license.png" alt="">
                <a href="javascript:;">沪ICP备11045714号</a>
                </span>
                <span>
                <img src="images/ghs.png" alt="">
                <a href="javascript:;">沪公网安备 31010102002067号</a>
                </span>
            </p>

    </footer>
    <script src="js/init.js"></script>
</body>
</html>